<template>
  <div class="storeMineOrder-wrap" v-if="data">
      <div class="order-wrap shadow" v-for="(item,index) in data" :key="index">
        <div class="clearfix" >
          <div class="l" style="padding: 0 7px">
            订单号:{{item.order_sn }}
          </div>
            <div class="r" style="padding: 0 7px">
            <!-- {{item.status}} -->
                <span :class="item.status == 'Finish' ? '' : 'dn'" >已完成</span>
                <span :class="item.status == 'Wait' ? '' : 'dn'" >未付款</span>
                <span :class="item.status == 'Unpaid' ? '' : 'dn'">未支付</span>
                <span :class="item.status == 'Dispatch' ? '' : 'dn'">配送中</span>
                <span :class="item.status == 'Refund' ? '' : 'dn'">退款</span>
                <span :class="item.status == 'Paid' ? '' : 'dn'">待发货</span>
                <span></span>
            </div>
        </div>
        <div>
          <p class="time">下单时间: {{item.created_at}}</p></div>
        <div class="goods-wrap">
          <van-card
              :num="item.params.number"
              :price="item.params.price"
              :desc="item.params.remark || '没有备注'"  
              :title="item.params.title"
              :thumb="item.params.avatar"
            />
          <div class="goods-address">
             <p>地址: {{ `${item.params.address.province || ' '}${item.params.address.city || ' '}${item.params.address.county || ' '}${item.params.address.address || ' '}` }}</p>
             <p>手机号码: {{ item.params.address.mobile || ' ' }}</p>
             <p :class="item.dispatch_info.str == 'xd0_123' ? 'dn' : ''">快递类型：{{ item.dispatch_info.str }}</p>
             <p :class="item.dispatch_info.str == 'xd0_123' ? 'dn' : ''">快递单号：{{ item.dispatch_info.num }}</p>
          </div>
          <div class="goods-tool">
            <div><van-icon name="ellipsis" size="20px" @click="getOrderDetails(item)" /></div>
            <div>
              <!-- {{ item.mode }} -->
              
              
              <template v-if="item.mode == 'Official' && item.status == 'Paid'">
                <template v-if="item.relation_id == null">
                  <van-button  size="mini" @click="generation(item)" type="info">一键代发</van-button>
                </template>
                <template v-else>
                  代发中
                </template>
                 
              </template>
              <van-button v-else :class="item.status == 'Paid' ? '' : 'dn'" size="mini" @click="editstatus(item)" type="info">发货</van-button>
            </div>
          </div>
        </div>
        <div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'StoreMineOrder',
  props:{
    data:[Array,Object]
  },
  data(){
    return {
      // list: []
    }
  },
  created(){

  },
  methods:{
    editstatus(item){
      this.$emit('editstatus',item)
    },
    getOrderDetails(item){
      this.$emit('getOrderDetails',item)
    },
    generation(item){
      this.$emit('generation',item)
    }
  }
}
</script>
<style lang="less" scoped>

.storeMineOrder-wrap {
  .order-wrap {
    background: white;
    padding: 5px 0;
    margin: 5px 0;
    
  }
}

.goods-tool,.goods-address {
  padding: 0 7px;
}

.goods-tool {
  display: grid;
  grid-template-columns: 1fr 1fr;
  line-height: 20px;
  :nth-child(2){
    text-align: right
  }
}
p.time  {
  padding: 0 7px;
}
p {
  margin: .25rem 0;
}

</style>
